<!-- Bootstrap styles -->
<link rel="stylesheet" href="<?=base_url()?>templates/js/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="<?=base_url()?>templates/js/fileupload/io/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="<?=base_url()?>templates/js/fileupload/css/jquery.fileupload.css">
<link rel="stylesheet" href="<?=base_url()?>templates/js/fileupload/css/jquery.fileupload-ui.css">
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="<?=base_url()?>templates/js/fileupload/css/jquery.fileupload-noscript.css"></noscript>
<noscript><link rel="stylesheet" href="<?=base_url()?>templates/js/fileupload/css/jquery.fileupload-ui-noscript.css"></noscript>

<? 
    $seg2 = $this->router->fetch_method();
?>
<div class="multi_upload">
    <div class="media-upload-header">
        <ul id="menu">
            <li>
                <a href="<?=base_url()?>mod_file_manager/image_manager/index/<?=$return_tag.'/'.$width.'/'.$height?>" <?if($seg2=='index'){echo ' class="current"';}?>>
                    <?=lang('library');?>
                </a>
            </li>
            <li>
                <a href="<?=base_url()?>mod_file_manager/image_manager/upload/<?=$return_tag.'/'.$width.'/'.$height?>" <?if($seg2=='upload'){echo ' class="current"';}?>>
                    <?=lang('upload_file');?>
                </a>
            </li>
        </ul>
    </div>
    <div class="form_upload">
        <div align="center" style="padding-top: 20px;">
            <table class="form">
                <tr>
                    <td colspan="2"><?php if(!empty($message)) echo "<div style='border:1px solid #fdb735; background-color: #e9ffef; padding:10px;margin-bottom:10px'>".$message."</div>";?>
                        <? if($this->session->flashdata('message')){
                            echo '<div class="message">'.$this->session->flashdata('message').'</div>';
                        }if($this->session->flashdata('error')){
                            echo '<div class="error">'.$this->session->flashdata('error').'</div>';
                        }if($this->session->flashdata('notes')){
                            echo '<div class="notes">'.$this->session->flashdata('notes').'</div>';
                        } ?>
                    </td>
                </tr>
                <tr>
                    <td class="required"><?=lang('category_image');?></td>
                    <td class="">
                        <select class="w300" name="image_category_id" id="image_category_id">
                            <!--<option value="">Category</option>-->
                            <?php foreach($list_category as $category){
                                echo '<option value="'.$category->image_category_id.'">'.$category->image_category_name.'</option>';
                            }?>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="upload_wrap">
        <!-- The file upload form used as target for the file upload widget -->
        <form id="fileupload" action="<?=base_url().'mod_file_manager/multi_upload/do_upload_images'?>" method="POST" enctype="multipart/form-data">
            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
            <div class="row fileupload-buttonbar">
                <div class="col-lg-7">
                    <!-- The fileinput-button span is used to style the file input field as button -->
                    <span class="btn btn-success fileinput-button">
                        <i class="glyphicon glyphicon-plus"></i>
                        <span>Add files...</span>
                        <input type="file" name="files[]" multiple>
                    </span>
                    <button type="submit" class="btn btn-primary start">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start upload</span>
                    </button>
                    <button type="reset" class="btn btn-warning cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel upload</span>
                    </button>
                    <button type="button" class="btn btn-danger delete">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>Delete</span>
                    </button>
                    <input type="checkbox" class="toggle">
                    <br/>
                    Total: <span id="total_file">0</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="total_success"></span>
                    <br/>
                    <!-- The global file processing state -->
                    <span class="fileupload-process"></span>
                </div>
                <!-- The global progress state -->
                <div class="col-lg-5 fileupload-progress fade">
                    <!-- The global progress bar -->
                    <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                    </div>
                    <!-- The extended global progress state -->
                    <div class="progress-extended">&nbsp;</div>
                </div>
            </div>
            <!-- The table listing the files available for upload/download -->
            <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
        </form>
    </div>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <input class="w300" type="text" name="title[]" value="{%=file.name.split('.')[file.name.split('.').length - 2]%}"/>
            <p class="name"></p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img height="80px" width="80px" src="{%=file.url%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <input type="text" name="title[]" value="{%=file.name%}"/>
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            {% if (file.deleteUrl) { %}
                <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="glyphicon glyphicon-trash"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="<?=base_url()?>templates/js/fileupload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="<?=base_url()?>templates/js/fileupload/io/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="<?=base_url()?>templates/js/fileupload/io/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="<?=base_url()?>templates/js/fileupload/io/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="<?=base_url()?>templates/js/fileupload/io/bootstrap.min.js"></script>
<!-- blueimp Gallery script -->
<script src="<?=base_url()?>templates/js/fileupload/io/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?=base_url()?>templates/js/fileupload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="<?=base_url()?>templates/js/fileupload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="<?=base_url()?>templates/js/fileupload/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="<?=base_url()?>templates/js/fileupload/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="<?=base_url()?>templates/js/fileupload/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="<?=base_url()?>templates/js/fileupload/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="<?=base_url()?>templates/js/fileupload/js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="<?=base_url()?>templates/js/fileupload/js/jquery.fileupload-ui.js"></script>
<script>
$(function () {
    'use strict';
    var total_file = 0;
    var total_success = 0;
    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: '<?=base_url().'mod_file_manager/multi_upload/do_upload_images'?>',
        dataType: 'json',
        maxFileSize: 10000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
    }).bind('fileuploadsubmit',function(e,data){
        
       if($("#image_category_id").val()!='')
	   {
           var inputs = data.context.find(':input');
            if (inputs.filter(function () {
                    return !this.value && $(this).prop('required');
                }).first().focus().length) {
                data.context.find('button').prop('disabled', false);
                return false;
            }
            data.formData = inputs.serializeArray();
       }else{
            data.context.find('.error').html('Please choose image category');
            data.context.find('.btn-primary').prop('disabled', false);
            return false;      
        }
    }).bind('fileuploaddone',function(e,data){
        $.each(data.result.files, function (index, file)
		{
			total_success +=1;
			$("#total_success").html("Success: "+total_success);
			$.ajax({
				type: "POST",
				url: '<?=base_url();?>mod_file_manager/image_manager/save_file_data',
				data: {
					lb_title          : file.title,  
					image_category_id : $("#image_category_id").val(),
					description       : '',
					lb_name           : file.name,
					lb_size           : file.size,
					lb_ext            :  file.type.split('/').pop()
				},
				dataType: 'json',
				async:true,
				error: function (request, status, error){},
				success: function(data) {
					window.location = url + 'mod_file_manager/image_manager' ;
				}
			});
		});
    }).bind('fileuploadstop',function(e,data){

    }).bind('fileuploaddestroy', function (e, data) {}).bind('fileuploadprocessfail', function (e, data) {
        
    }).bind('fileuploadadd', function (e, data) {
        total_file +=1;
        $("#total_file").html(total_file);
    }).bind('fileuploadfail', function (e, data) {
        total_file -=1;
        $("#total_file").html(total_file);
    }).bind('fileuploaddestroy', function (e, data) {
        total_file -=1;
        $("#total_file").html(total_file);
        total_success -=1;
        $("#total_success").html("Success: "+total_success);
    });
	
});
</script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="<?=base_url()?>templates/js/fileupload/js/cors/jquery.xdr-transport.js"></script>
<![endif]-->